<template>
  <div>
    <Inject />
  </div>
</template>

<script setup>
// 要为组件后代供给数据，需要使用到 provide() 函数
import { provide, ref } from 'vue'
import Inject from '../components/Inject.vue'

// provide() 函数接收两个参数，第一个参数被称为注入名，可以是一个字符串或是一个 Symbol。后代组件会使用注入名来查找期望注入的值。一个组件可以多次调用 provide()，使用不同的注入名，注入不同的依赖值；第二个参数是供给的值，值可以是任意类型，包括响应式的状态，比如一个 ref
// provide(注入名, 值)

provide('message', 'hello!')

const count = ref(0)

// 当使用响应式 provide/inject 值时，建议尽可能将任何对响应式状态的变更都保持在 provider 内部。这样可以确保 provide 的状态和变更操作都在同一个组件内 ，使其更容易维护。
// 如果我们需要在 injector 组件中更改数据。这种情况下，推荐在 provider 组件内提供一个更改数据方法
function updateCount(val) {
  count.value = val
}
provide('count', {
  count,
  updateCount
}) // 供给的响应式状态使后代组件可以由此和供给者建立响应式的联系
</script>

<style scoped>

</style>